<script setup>
import { ref } from 'vue';
import { artArticleInfo } from '@/api/article.js'
import { baseURL } from '@/utils/request';
import { formatTime } from '@/utils/format';
const drawerStatus = ref(false)
const imgUrl = ref('')
const formModel = ref({
    title: '',
    content: '',
    cover_img: '',
    pub_date: '',
    cate_name: ''
})



const open = async (row) => {
    const res = await artArticleInfo(row.id)
    console.log("artArticleInfo", res.data.data);
    formModel.value = res.data.data
    imgUrl.value = baseURL + formModel.value.cover_img
    console.log("ima", imgUrl.value);

    console.log(formModel.value);

    drawerStatus.value = true

}
defineExpose({
    open
})
</script>
<template>
    <!-- 文章预览 -->
    <el-drawer v-model="drawerStatus" title="文章预览" size="50%">
        <h1>{{ formModel.title }}</h1>
        <div class="info">
            <span>作者：{{ formModel.nickname || formModel.username }}</span>
            <span>发布时间：{{ formatTime(formModel.pub_date) }}</span>
            <span>文章分类：{{ formModel.cate_name }}</span>
        </div>
        <div class="image">
            <img :src="imgUrl" alt="">
        </div>
        <div class="content" v-html="formModel.content">
        </div>
    </el-drawer>
</template>
<style lang="scss" scoped>
.info {
    margin-top: 10px;
    display: flex;
    // justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #000;

    span {
        margin-right: 20px;
    }
}

.image {
    margin: 20px 0;
}
</style>